<template>
	<view  style="width: 100%;background-color: #FFF;">
		<!-- 搜索条 -->
		<view class="searchTopBox">
			<view class="searchBoxRadius">
				<view class="grace-search-icon searchBoxIcon" style="height: 100%;width: 5%;margin-top: 1.5%;">
						<uni-icons type="search" size="24" color="#6BA8FD" @click="search"></uni-icons>
				</view>
				<view>
					<input class="searchBoxIpt" v-model="searchVal" type="search"  @confirm="searchNow($event)" placeholder="关键字" style="width: 65%;"></input>
				</view>
					<button class="primary" style="height: 100%;font-size: 88%;" @click="search">搜索</button>
			</view>
		</view>
		<!-- <QSInput :name="formName" variableName="customTapIcon" type="search" @confirm="searchNow($event)" placeholder="关键字" customTapIcon="search" v-model="searchVal" :itemDisabled="itemDisabled"></QSInput> -->
		<view class="list">
			<view class="flex_col" @longpress="onLongPress" :class="{'active':pickerUserIndex==index}" @tap="toOperationlog(item.id)" v-for="(item,index) in logList"
			 :key="index" :data-index="index">
				<image src="../../static/rizhi.png" mode="aspectFill"></image>
				<view class="flex_grow">
					<view class="flex_col">
						<view class="flex_grow">{{item.title}}</view>
						<view class="time">{{item.updateDate | dateFormat("YYYY-MM-DD")}}</view>
					</view>
					<view v-if="item.content != null" style="font-size: 14px;color: #A7A1A1;width: 90%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.content}}</view>
				</view>
			</view>
		</view>
		<!-- 我是分割线 -->
		<view>
			<uni-load-more :status="status" :content-text="contentText" color="#C0C4CC"/>
		</view>
		<view class="shade" v-show="showShade" @tap="hidePop">
			<view class="pop" :style="popStyle" :class="{'show':showPop}">
				<view v-for="(item,index) in popButton" :key="index" @tap="pickerMenu" :data-index="index">{{item}}</view>
			</view>
		</view>

		<view class="icon" >
			<uni-icons @click="toAddWork" type="plusempty" size="30"></uni-icons>
		</view>

	</view>


</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'

	import loginjs from '@/login.js'
	import search from "@/components/jm-search/jm-search.vue"
	// import uniIcons from '@dcloudio/uni-ui/lib/uni-icon/uni-icon.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import uniSection from '@/components/uni-section/uni-section.vue';
	import youScroll  from "@/components/you-scroll.vue"

	import {
		mapState
	} from 'vuex'

	export default {
		computed: mapState(['baseUrl']),
		components:{
			search,
			uniSection,
			uniIcons,
			youScroll,
			uniLoadMore
			},
		data() {
			return {
				status: 'more',
				statusTypes: [{
					value: 'more',
					text: '加载前'
				}, {
					value: 'loading',
					text: '加载中'
				}, {
					value: 'noMore',
					text: '没有更多'
				}],
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '———————— 我是有底线的 ————————'
				},//end

				listContent: [],
				delBtnWidth: 60, //删除按钮宽度单位（rpx）
				startX:'',

				userList: [],
				/* 窗口尺寸 */
				winSize: {},
				/* 显示遮罩 */
				showShade: false,
				/* 显示操作弹窗 */
				showPop: false,
				/* 弹窗按钮列表 */
				popButton: ["删除日志"],
				/* 弹窗定位样式 */
				popStyle: "",
				/* 选择的用户下标 */
				pickerUserIndex: -1,

				current:1,//分页获取数据默认第一页
				size:8,//默认每页的条数
				img: '../../static/slide-list/qr_code.png',
				start_slide_x: 0,
				btnWidth: 0,
				startX: 0,
				LastX: 0,
				startTime: 0,
				screenName: '',
				logList: [],
				user:null,
				Authorization:null,
				btuBottom: '0',
				secondHeight: '',
				idlist:[],
				searchVal:'',
				pages:0,//总页数
				text:"加载更多",
				delId:null
			}
		},
		onShow(option) {
			uni.startPullDownRefresh();
			this.searchVal=''
			//检测用户是否登录
			var uNameAndAuth= loginjs.checkLogin()
			if(uNameAndAuth==null){
				return
			}
			//用户名和认证信息的组合
			//用户名和认证信息的组合
			 uNameAndAuth= uNameAndAuth.split("/")
			this.user=uNameAndAuth[0]
			this.Authorization=uNameAndAuth[1]
			if(this.Authorization==null){
				return
			}
		},
		
		onHide() {
			this.logList=[]
		},
		onLoad() {
			//检测用户是否登录
				var uNameAndAuth= loginjs.checkLogin()
				//用户名和认证信息的组合
				if(uNameAndAuth==null){
					return
				}
				 uNameAndAuth= uNameAndAuth.split("/")
				this.user=uNameAndAuth[0]
				this.Authorization=uNameAndAuth[1]
				if(this.Authorization==null){
					return
				}
				this.getList();

			this.getListData();
			this.getWindowSize();

			// #ifdef H5
			document.onLong = function(e) {
				var e = e || window.event;
				e.preventDefault();
			};
			// #endif

		},
		onPullDownRefresh() {
			this.searchVal=''
			this.logList=[]
			this.current=1
			this.getList()
			this.idlist=[]
		},
		// 上拉加载
		onReachBottom() {
			let _self = this
			if(this.size<8){
				this.status = 'noMore'
			}
			this.status = 'loading'
			if(this.current>=this.pages){
				this.status = 'noMore'
				return
			}
				this.current=this.current+1
				this.getList()
		},
		methods: {

			/* 查询点击事件 */
			search(){
				if(this.searchVal==''){
					uni.showToast({
						title:"请输入查询内容",
						duration:2000,
						icon:"none"
					})
					return
				}
				uni.request({
					url:this.baseUrl+"api/logWork/appQuery",
					data: this.searchVal,

					dataType:"String",
					header: {
					"Authorization": this.Authorization,
					},
					method:"POST",
					success: (res) => {
						console.log(res.data)
						var data=JSON.parse(res.data)
						if(data.code==200){
							if(data.data.length>0){
								this.logList=[]
								this.current=this.pages=0
								data.data.forEach(e => {
									this.logList.push({
										id: e.id,
										name: e.title,
										remarks: e.content,
										updateDate: e.updateDate,
										isShare: true,
										slide_x: 0
									})
								})
							}else{
								uni.showToast({
									title:"查询无数据",
									icon:"none",
									duration:2000
								})
								return
							}
						}else{
							//获取数据异常
							uni.showToast({
								title:"获取数据异常A",
								icon:"none",
								duration:2000
							})
						}
					},
					fail() {
						uni.showToast({
							title:"获取数据异常B",
							icon:"none",
							duration:2000
						})
					}
				})
			},
			/* 点击每条数据掉转至详情，修改界面 */
			toOperationlog(logId){
				uni.navigateTo({
					url:'operationlog?logId='+logId
				})
			},

			/* 单选删除 */
			del(val){
				this.idlist.push(val)
				uni.request({
					url:this.baseUrl+"api/logWork/delete/"+val,
					//data:JSON.stringify(this.idlist),
					method:"DELETE",
					dataType:'json',
					header: {
					"Authorization": this.Authorization,
					},
					success:(res)=>{
						if(res.data.code==200){
							uni.showToast({
								title:"删除成功",
								icon:"none",
								duration:2000
							})
							/* 遍历数组当删除的id存在数组中则进行删除 */
							 for(var i=0;i<this.logList.length;i++){
								 if(this.logList[i].id==val){
								  this.logList.splice(this.logList.indexOf(this.logList[i]),1)
								}
							}
							this.idlist=[]
						}else if(res.data.code==500){
							this.idlist=[]
							uni.showToast({
								title:"删除失败500",
								icon:"none",
								duration:2000
							})
						}

					},
					fail(e){
						uni.showToast({
							title:e,
							icon:"none",
							duration:2000
						})
					}
				})

			},

			onPullDown(){
				console.log("adf")
			},
			toAddWork(){
				uni.navigateTo({
					url:'operationlog'
				})
			},



			getList() {
				uni.showLoading({
					title:"正在获取数据"
				})

				uni.request({
					method: "GET",
					url:this.baseUrl+'api/logWork/getPageList?current='+this.current+'&size='+this.size,
					header: {
						"Authorization": this.Authorization,
					},
					success: (res) => {
						uni.stopPullDownRefresh()
						uni.hideLoading()
						if(res.data.code==200){
							if(res.data.data.length==0){
								uni.showToast({
									title: "当前无数据",
									icon: "none",
									duration: 1000
								})
								return
							}
							/* 总页数 */
							this.pages=res.data.pager.pages
							res.data.data.forEach(e => {
								this.logList.push({
									id: e.id,
									title: e.title,
									content: e.content,
									updateDate: e.updateDate,
									isShare: true,
									slide_x: 0
								})
							})
						}else if(res.data.code==401){
							/* 登录信息失效 */
							uni.showToast({
								title:"认证信息失效",
								icon:"none",
								duration:2000
							})
							/*
							setTimeout(function(){
								 跳转至登录界面
								uni.navigateTo({
									url:"../login/login"
								})
							},2000)*/
						}

					},
					fail() {
						uni.hideLoading()
						uni.showToast({
							title: "获取网络数据失败",
							icon: "none",
							duration: 1000
						})
					}
				})
			},//getList结束

			/* checkbox选中和未选中触发事件 */
			checkboxChange(id,index){
				//console.log(id+"------->"+index)
				if(this.idlist.length==0){
					this.idlist.push(id)
				}else{
				 if(this.idlist.indexOf(id)!=-1){
					 //存在这个值
					 console.log("存在这个值，根据index删除")
					 this.idlist.splice(index,1)
				 }else{
					 //不存在这个值
					 this.idlist.push(id)
				 }

				}
			},
			/* 多选删除 */
			delmanny(){
				if(this.idlist.length==0){
					uni.showToast({
						title: "请选择删除的元素",
						icon: "none",
						duration: 1000
					})
					return
				}else{
					//console.log(this.idlist)
					/* 先发送到后台删除，删除成功后再前台删除 */
					uni.request({
						url:this.baseUrl+"api/logWork/deletes",
						data:JSON.stringify(this.idlist),
						method:"DELETE",
						header: {
						"Authorization": this.Authorization,
						},
						success: (res)=>{
							if(res.data.code==200){

									for(var j=0;j<this.idlist.length;j++){
									 for(var i=0;i<this.logList.length;i++){
										if(this.logList[i].id==this.idlist[j]){
											/* 如果原来数组中的id等于要多选集合中的值 */
											//console.log("值相等的下标"+this.logList.indexOf(this.logList[i]))
											this.logList.splice(this.logList.indexOf(this.logList[i]),1)
											console.log("删除的下标为"+this.logList.indexOf(this.logList[i]))

										}
									}
								}


								/* 删除后，刷新数据 */
								this.idlist=[]
								console.log(this.idlist)
								uni.showToast({
									title:"删除成功",
									icon:"none",
									duration:2000,
								})
									//this.getList()


							}else{
								uni.showToast({
									title: "删除失败",
									icon: "none",
									duration: 1000
								})
							}


						},
						fail(){
							uni.showToast({
								title: "删除失败",
								icon: "none",
								duration: 1000
							})
						}
					})


				}


			},

			addCustomer() {
				console.log('点击添加按钮')
				uni.navigateTo({
					url: 'addOrUpdateLog'
				});
			},
			getDetail(item) {
				console.log('查看详情')

			},
			// 滑动开始
			touchStart(e, index) {
				console.log("sdfsdfs")

				//记录手指放上去的时间
				this.startTime = e.timeStamp;
				//记录滑块的初始位置
				this.start_slide_x = this.logList[index].slide_x;
				// 按钮宽度
				uni.createSelectorQuery()
					.selectAll('.group-btn')
					.boundingClientRect()
					.exec(res => {
						if (res[0] != null) {
							this.btnWidth = res[0][index].width * -1;
						}
					});
				// 记录上一次开始时手指所处位置
				this.startX = e.touches[0].pageX;
				// 记录上一次手指位置
				this.lastX = this.startX;
				//初始化非当前滑动消息列的位置
				this.logList.forEach((item, eq) => {
					if (eq !== index) {
						item.slide_x = 0;
					}
				});
			},
			// 滑动中
			touchMove(e, index) {
				const endX = e.touches[0].pageX;
				const distance = endX - this.lastX;
				// 预测滑块所处位置
				const duang = this.logList[index].slide_x + distance;
				// 如果在可行区域内
				if (duang <= 0 && duang >= this.btnWidth) {
					this.logList[index].slide_x = duang;
				}
				// 此处手指所处位置将成为下次手指移动时的上一次位置
				this.lastX = endX;
			},
			// 滑动结束
			touchEnd(e, index) {
				let distance = 10;
				const endTime = e.timeStamp;
				const x_end_distance = this.startX - this.lastX;
				if (Math.abs(endTime - this.startTime) > 200) {
					distance = this.btnWidth / -2;
				}
				// 判断手指最终位置与手指开始位置的位置差距
				if (x_end_distance > distance) {
					this.logList[index].slide_x = this.btnWidth;
				} else if (x_end_distance < distance * -1) {
					this.logList[index].slide_x = 0;
				} else {
					this.logList[index].slide_x = this.start_slide_x;
				}
			},
			// 点击回复原状
			recover(index) {
				this.logList[index].slide_x = 0;
			},
			// 分享
			top(id) {
				uni.navigateTo({
					url: 'addOrUpdateLog?id=' + id
				});
			},
			/* 列表触摸事件 */
			listTap() {
				/* 因弹出遮罩问题，所以需要在遮罩弹出的情况下阻止列表事件的触发 */
				if (this.showShade) {
					return;
				}

				console.log("列表触摸事件触发")
			},

			/* 获取窗口尺寸 */
			getWindowSize() {
				uni.getSystemInfo({
					success: (res) => {
						this.winSize = {
							"witdh": res.windowWidth,
							"height": res.windowHeight
						}
					}
				})
			},
			/* 长按监听 */
			onLongPress(e) {
				//获取每条数据的id
				var delData=this.logList.filter((data,index)=>index==e.currentTarget.dataset.index)
				this.delId=delData[0].id

				let [touches, style, index] = [e.touches[0], "", e.currentTarget.dataset.index];

				/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
				if (touches.clientY > (this.winSize.height / 2)) {
					style = `bottom:${this.winSize.height-touches.clientY}px;`;
				} else {
					style = `top:${touches.clientY}px;`;
				}
				if (touches.clientX > (this.winSize.witdh / 2)) {
					style += `right:${this.winSize.witdh-touches.clientX}px`;
				} else {
					style += `left:${touches.clientX}px`;
				}

				this.popStyle = style;
				this.pickerUserIndex = Number(index);
				this.showShade = true;
				this.$nextTick(() => {
					setTimeout(() => {
						this.showPop = true;
					}, 10);
				});
			},
			/* 隐藏弹窗 */
			hidePop() {
				this.showPop = false;
				this.pickerUserIndex = -1;
				setTimeout(() => {
					this.showShade = false;
				}, 250);
			},
			/* 选择菜单 */
			pickerMenu(e) {
				//第${this.pickerUserIndex+1}个用户,第${index+1}个按钮
				let index = Number(e.currentTarget.dataset.index);

				this.del(this.delId);
				// 在这里开启你的代码秀
				uni.showToast({
					title: ``,
					icon: "none",
					mask: true,
					duration: 600
				});
				/*
				 因为隐藏弹窗方法中会将当前选择的用户下标还原为-1,
				 如果行的菜单方法存在异步情况，请在隐藏之前将该值保存，或通过参数传入异步函数中
				 */
				this.hidePop();
			}
		}
	}
</script>

<style scoped lang="scss">

	.mycontent {
		background-color: #efeff4;
	}

	/* 列式弹性盒子 */
	.flex_col {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		align-content: center;
	}

	/* 弹性盒子弹性容器 */
	.flex_col .flex_grow {
		width: 0;
		-webkit-box-flex: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
	}

	.flex_row .flex_grow {
		-webkit-box-flex: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
	}

	/* 弹性盒子允许换行 */
	.flex_col.flex_wrap {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	/* 列表 */
	.list {
		// background-color: #fff;
		font-size: 28upx;
		color: #333;
		user-select: none;
		touch-callout: none;

		&>view {
			padding: 24upx 30upx;
			position: relative;

			&:active,
			&.active {
				// background-color: #f3f3f3;
			}

			image {
				height: 80upx;
				width: 80upx;
				border-radius: 4px;
				margin-right: 20upx;
			}

			&>view {
				line-height: 40upx;

				.time,
				.info {
					color: #999;
					font-size: 24upx;
				}

				.time {
					width: 150upx;
					text-align: right;
				}

				.info {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}

		&>view:not(:first-child) {
			margin-top: 1px;

			&::after {
				content: '';
				display: block;
				height: 0;
				border-top: #CCC solid 1px;
				width: 620upx;
				position: absolute;
				top: -1px;
				right: 0;
				transform:scaleY(0.5);	/* 1px像素 */
			}
		}
	}

	/* 遮罩 */
	.shade {
		position: fixed;
		z-index: 100;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		-webkit-touch-callout: none;

		.pop {
			position: fixed;
			z-index: 101;
			width: 200upx;
			box-sizing: border-box;
			font-size: 28upx;
			text-align: left;
			color: #333;
			background-color: #fff;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
			line-height: 80upx;
			transition: transform 0.15s ease-in-out 0s;
			user-select: none;
			-webkit-touch-callout: none;
			transform: scale(0, 0);

			&.show {
				transform: scale(1, 1);
			}

			&>view {
				padding: 0 20upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				user-select: none;
				-webkit-touch-callout: none;

				&:active {
					// background-color: #f3f3f3;
				}
			}
		}
	}
</style>
<style scoped>
		.searchTopBox {
			width: 100%;
			height: 100upx;
			margin-top: 15px;
			box-sizing: border-box;
		}

		.searchBoxRadius {
			width: 90%;
			height: 60upx;
			 background-color:#f8f8f9;
			margin-left: 5%;
			overflow: hidden;
			border-radius: 35upx;
		}

		.searchBoxIcon {
			/* margin-top: 15upx;*/
			margin-left: 20upx;
			float: left;
		}

		.searchBoxIpt {
			height: 70upx;
			line-height: 70upx;
			font-size: 16px;
			margin-left: 20upx;
			float: left;
		}

		.searchBotBox {
			width: 100%;
			margin-top: 30upx;
			padding: 15upx 3%;
			box-sizing: border-box;
		}
		image{
			display: block;
			width: 32px;
			height: 32px;

		}
	.item{
		width: 100%;
		height: 60px;
		border-bottom: 1px solid #808080;
		margin-bottom: 10px;
	}
	.checkbox{
		line-height: 60px;
		width: 10%;
		margin-left:1%;
		float: left;

	}

	.icon{
		background-color: #007AFF;
		text-align: center;
		border-radius: 50%;
		width:40px;
		line-height: 40px;
		position: fixed;
		top:90%;
		left: 85%;
		height:40px;
	}

		.showmore{
		    clear:both;
			text-align:center;
			padding-top: 20px;
			font-size:10px;
			}
</style>
